<template>
  <div class="recommend">
    <Scroll>
        <div>
            <swiper :options="swiperOption" ref="mySwiper" class="swiper">
                <swiper-slide v-for="item in swiperList" :key="item.id">
                    <img :src="item.cover"  @click="getRecommendData(item)"/>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
            <div class="recommend-list">
                <h1 class="recommend-title">热门歌单推荐</h1>
                <ul>
                    <li v-for="item in disList" :key="item.id" class="item" @click="getRecommendData(item)">
                    <div class="icon">
                        <img :src="item.cover" alt />
                    </div>
                    <div class="text">
                        <h2 class="name" v-html="item.category"></h2>
                        <p class="desc">{{item.title | fil}}</p>
                    </div>
                    </li>
                </ul>
            </div>
            <div class="load-con" v-show="!disList.length">
                <Load></Load>    
            </div>     
        </div>   
    </Scroll>
    <router-view></router-view>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper"; //局部引入
import Scroll from "@/components/base/scroll"
import Load from "@/components/base/loading"
import {mapMutations} from "vuex"
export default {
    data() {
        return {
        swiperOption: {
            pagination: {
            el: ".swiper-pagination"
            },
            loop: true,
            autoplay: true
        },
        swiperList: [], //轮播列表数据
        disList: [] //推荐列表数据
        };
    },
    created() {
        this.$axios.get("http://101.200.47.25:1111/api/getRecommendData").then(res => {
        this.swiperList = res.data.shift().categoryList;
        res.data.forEach(item => {
            item.categoryList.forEach(item1 => {
            item1.category = item.category;
            this.disList.push(item1);
            });
        });
        });
        console.log(process.env.NODE_ENV)
    },
    filters:{
        fil(tex){
            if(tex.length>13){
                return tex.slice(0,13)+"..."
            }
            return tex
        }
    },
    methods: {
        ...mapMutations({
            setCommend:"SET_RECOMMEND"
        }),
        getRecommendData(item){
            this.$router.push(`/recommend/${item.id}`);
            this.setCommend(item)
            // this.$axios.post(`http://localhost:1111/api/getRecommendDetailData/${item.id}`,item.id)
            //     .then(res=>{
            //         console.log(res)
            //     })
        }
    },
    components: {
        swiper,
        swiperSlide,
        Scroll,
        Load
    }
};
</script>

<style lang="stylus" scoped>
.swiper >>> .swiper-pagination-bullet-active 
    background-color: orange;

.recommend
    position:fixed
    top:80px
    width:100%
    z-index:-10
    .swiper 
        height: 320px;

        img 
            width: 100%;
            height: 100%;
    .recommend-list 
        width:100%;
        padding-bottom:80px;
        .recommend-title 
            text-align: center;
            line-height: 70px;
        .item 
            box-sizing border-box 
            height:150px
            width:100%
            padding 0 30px
            .icon
                float left
                width:100px
                margin-top 25px
                margin-right 30px
                img 
                    width:100%
            .text
                display flex
                flex-direction column
                justify-content  center
                height 100px
                .name
                    margin 50px 0 15px 0
                    font-size 19px
                .desc
                    color gray
                    line-height 20px
    .load-con
        position:absolute
        width:50%
        transform:translateX(50%)

</style>